<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"   />
        <link rel="stylesheet" href="../../res/css/mz.css" />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="../../res/js/mz.common.js"></script>
        <script src="../../res/js/mz.list.js"></script>
        <style>
            .layui-input-inline .layui-input{display: inline-block; width: 200px;}
        </style>
    </head>
    <body>

        <div style=" margin: 10px auto;">
            <a class="layui-btn layui-btn-success layui-btn-sm" href="edit.html"><i class="layui-icon layui-icon-addition"></i>新增</a>
            <div class="layui-input-inline">
                <input id="key" type="text" class="layui-input" placeholder="输入关键字" />
                <button onclick="query()" class="layui-btn layui-btn-success layui-btn-sm"><i class="layui-icon layui-icon-search"></i>查询</button>
            </div>
        </div>

        <div style=" margin: 10px auto;">
            <table id="table_view"></table>
        </div>

        <script type="text/html" id="operationDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">预览</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
        </script>

        <script>

            var field_setting = [
                                    {title: '编号', field: 'id', type: 'number'},
                    {title: '标题', field: 'title', type: 'text'},
                    {title: '查询', field: 'mapping_uri', type: 'text'},
                    {title: '字段描述', field: 'fields', type: 'textarea'},
            ];

            // field_setting.unshift({type: 'checkbox', fixed: 'left'});

            field_setting.push({fixed: 'right', title: '操作', width: 220, align:'center', toolbar: '#operationDemo'});

            var listObj = new MZList({
                elem: '#table_view',
                url: base_url + '/report_form_list',  //数据接口
                where: {
                    title: '%',                         //自定义查询字段
                },
                cols: [field_setting],
                toolbarEvents: {
                    view: {url: 'view.html'},
                    edit: {url: 'edit.html'},
                    remove: {url: base_url + '/report_form_delete'}
                }
            });

            function query() {
                var key = layui.$("#key").val();
                key = '%' + key + '%';
                //根据条件查询，需要数据接口查询语句有如下参数（eg : ‘title’）
                listObj.reload( {where : {title: key}} )
            }

        </script>

    </body>
</html>
